<template>
  <div id="detail">
    <detail-nav-bar class="nav-detail" @titleclick="titleClick" ref="nav_detail"></detail-nav-bar>
    <scroll class="content_detai" ref="scroll_detail" :probe-type="3" @scroll="scroll_navigation">
    <detail-dwiper :topImages="topimges"></detail-dwiper>
    <detailBase-info :goods="goods"></detailBase-info>
    <detail-shop-info :shop="shop"></detail-shop-info>
    <detail-goods-info :imagesInfo="detailInfo" @imgload="imgload">
    </detail-goods-info>
    <detail-param-info ref="parandetail" :param-info="paramInfo"></detail-param-info>
    <detail-comment-info ref="commentdetail" :comment-info="commentInfo"></detail-comment-info>
    <goods-list ref="listdetail" :goods="recommend"></goods-list>
    </scroll>
  <back-top @click.native="backclick" v-show='ishowbacktop'></back-top>
  <detail-bottom-bar @add_shopping="add_shopping"></detail-bottom-bar>
  <toast :message="message" :show="show"/>
  </div>
</template>

<script>
import DetailCommentInfo from "./childComps/DetailCommentInfo.vue"
import DetailDwiper from "./childComps/DetailDwiper.vue";
import DetailNavBar from './childComps/DetailNavBar.vue';
import DetailBaseInfo from "./childComps/DetailBaseInfo.vue";
import DetailShopInfo from "./childComps/DetailShopInfo.vue";
import DetailGoodsInfo from "./childComps/DetailGoodsInfo.vue"
import DetailParamInfo from "./childComps/DetailParamInfo.vue"
import DetailBottomBar from "./childComps/DetailBottomBar.vue"
import GoodsList from "@/components/content/goods/GoodsList.vue"

import backTop from "@/components/content/backTop/backTop"

import {getDetail,Goods,Shop,GoodsParams,getRecommend} from "@/network/detail.js";

import Scroll from "@/components/common/scroll/Scroll.vue";

import {mapActions} from 'vuex'

import Toast from "@/components/common/toast/Toast.vue"
export default {
    name:"Detail",
    data() {
      return {
        iid:null,
        topimges:[],
        goods:{},
        shop:{},
        detailInfo:{},
        paramInfo:{},
        commentInfo:{},
        recommend:[],
        themeTopYs:[0],
        oldindex_detail:0,
         ishowbacktop:false,
         position:{},
         message:'',
         show:false
      }

    },
    created(){
      this.iid=this.$route.params.id
      getDetail(this.iid).then(res=>{
        const data =res.result;
        // 轮播图数据
        this.topimges=res.result.itemInfo.topImages
        // 整理数据(商品)
        this.goods = new Goods(data.itemInfo , data.columns , data.shopInfo.services)
        // 整理数据(店铺)
        this.shop =new Shop(data.shopInfo)
        // 保存商品详情
        this.detailInfo=data.detailInfo
        // 参数
        this.paramInfo=new GoodsParams(data.itemParams.info, data.itemParams.rule)
        // 评论信息
        if(data.rate.cRate!==0){
          this.commentInfo=data.rate.list[0]
          console.log(this.commentInfo);
        }
        // this.$nextTick(() =>{
        // })

      })

      getRecommend().then(res => {
        this.recommend=res.data.list
      })
    }, 
    components:{
      DetailNavBar,
      DetailDwiper,
      DetailBaseInfo,
      DetailShopInfo,
      Scroll,
      DetailGoodsInfo,
      DetailParamInfo,
      DetailCommentInfo,
      GoodsList,
      DetailBottomBar,
      backTop,
      Toast
    },
    methods:{
      ...mapActions(['addCart']),
      // 回到顶部按键启动
      backclick(){
        // 父亲访问儿子
        // ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，可以通过实例直接调用组件的方法或访问数据
        this.$refs.scroll_detail.scrollTo(0,0,1000)
      },
      // 检索放入不同组件所在地址
      imgload(){
        this.$refs.scroll_detail.scroll.refresh()
          this.themeTopYs=[]
          this.themeTopYs.push(0);
          this.themeTopYs.push(this.$refs.parandetail.$el.offsetTop-44);
          this.themeTopYs.push(this.$refs.commentdetail.$el.offsetTop-44);
          this.themeTopYs.push(this.$refs.listdetail.$el.offsetTop-44);
          this.themeTopYs.push(Number.MAX_VALUE);
      },
      // 点击导航栏跳转
      titleClick(index){
        console.log(index);
        this.$refs.scroll_detail.scrollTo(0,-this.themeTopYs[index],1000)
     
      },
      // 导航栏位置判断
      scroll_navigation(position){
        this.ishowbacktop=(-position.y) >1000
        for(let i = 0;i< this.themeTopYs.length-1;i++){
          
            if(this.oldindex_detail !== i && (-position.y > this.themeTopYs[i]) && (-position.y < this.themeTopYs[i+1])){
              this.oldindex_detail=i
              this.$refs.nav_detail.currentIndex=i
            }
        }



      },
       // 加入购物车
      add_shopping(){
        // 获取信息
        const producet={}
        producet.imge=this.topimges[0]
        producet.title=this.goods.title
        producet.desc=this.goods.desc
        producet.price=this.goods.realPrice
        producet.iid=this.iid
        // this.$store.commit('addCart',producet)

        // 因为映射，和下方相同
        // this.$store.dispatch('addCart', producet).then(res =>{
        //   console.log(res);
        // })
        this.addCart(producet).then(res =>{
          this.show=true
          this.message=res

          setTimeout(()=>{
             this.show=false
          },1500)
        })

      }
    }
}
</script>

<style>
.nav-detail{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: seashell;
  z-index: 999;
}
#detail{
  position: relative; 
  z-index: 11000;
  background-color: #fff;
  height: 100vh;
}
.content_detai{
  height: calc( 100% - 44px );
}
</style>